<script lang="ts">
	import FormField from '@smui/form-field';
	import Checkbox from '@smui/checkbox';
	import IconButton from '@smui/icon-button';
	import Textfield from '@smui/textfield';
	import { createEventDispatcher, onMount } from 'svelte';
	import { Divider } from '$components/basic';
	import Picture from '$components/basic/picture/picture.svelte';
	import { price_filter, input_quantity_filter, price_transform } from '$utils/filter';
	import Product from '$components/business/product/product.svelte';
	import { createMessage } from '$components/basic/message';
	import { createDialog } from '$components/basic/dialog/dialog';
	import { writable } from 'svelte/store';
	import { formatDate } from '$utils/date';

	export let info: Partial<Product.Detail> = {};
	const dispatch = createEventDispatcher();

	const getMax = () => {
		const max_default = Number(info.max);
		const maxValue = Number(max_default && !isNaN(max_default) ? info.max : info.remainder_stock);
		const stock = Number(info.remainder_stock);
		return Math.min(maxValue, stock);
	};
	const getMin = () => Number(info.moq!);

	const valid_quantity = (value: number, info: Partial<Product.Detail>): [boolean, number] => {
		if (isNaN(value)) return [false, info.moq!];

		const moq = Number(info.moq!);
		const max = getMax();

		if (value && value % moq === 0 && value >= info.moq! && ((max && value <= max!) || !max)) {
			return [true, value];
		} else {
			return [false, value];
		}
	};

	const reset_amount = (v: number) => {
		const moq = Number(info.moq!);
		const [status, value] = valid_quantity(v, info);
		if (status) info.num = value;
		else {
			const multiple = Math.floor(value / moq);
			info.num = input_quantity_filter(multiple * moq, getMax(), getMin());
		}
		dispatch('updateItemNum', { id: info.id, num: info.num });
	};
	const add = () => reset_amount(Number(info.num) + Number(info.moq!));
	const minus = () => reset_amount(Number(info.num) - Number(info.moq!));
	const changeQuantity = () => reset_amount(Number(info.num));

	const deleteCart = () => {
		createDialog('tip', 'Are you sure you want to delete this item?', () => {
			dispatch('deleteItem', { id: info.id });
		});
	};

	export let group: IObject;

	$: seriaInfo = [
		{ name: 'Type: ', icon: 'package_2', value: info.itemType, style: 'color: #3b82f6' },
		{ name: 'Series: ', icon: 'content_copy', value: info.series },
		{ name: 'Code: ', icon: 'barcode', value: info.code },
		{ name: 'Dash: ', icon: 'sensors', value: info.dash },
		{ name: 'Country: ', icon: 'attach_file', value: info.country },
		{ name: 'Casepack: ', icon: 'wifi_tethering', value: info.casepack }
	];

	$: total = Number(info.price!) * Number(info.num);
</script>

<div
	class="w-1320px min-w-350px max-w-100% border border-solid border-color-gray-3 bg-gray-1 rounded-md p-20px"
>
	<FormField class="w-full relative bg-gray-2 rounded-md p-10px">
		<Checkbox bind:checked={group[String(info.id)]}></Checkbox>
		<span slot="label">
			Add Date: {formatDate('DD/MM/YY hh:mm:ss', new Date(Number(info.add_date)))}</span
		>
		<IconButton
			on:click={deleteCart}
			class="material-symbols-outlined absolute right-20px rounded-full"
			style="--mdc-theme-primary: #333">close</IconButton
		>
	</FormField>
	<div class="w-full flex flex-row gap-20px">
		<div class="flex-1">
			<div class="w-full flex flex-row items-center gap-10px">
				<a href={'/detail/' + info.id}
					><Picture src={info.thumb} class="w-140px h-140px! cursor-pointer ml-20px" alt="" /></a
				>
				<div class="h-160px w-1px ml-20px" style="--mdc-theme-primary: #d1d5db">
					<Divider direction="vertical" />
				</div>
				<div class="order-detail h-140px flex-1 flex flex-col gap-10px ml-20px">
					<div class="title font-size-22px cursor-pointer">{info.title}</div>
					<div class="w-70% flex-1 grid grid-cols-2 gap-5px">
						{#each seriaInfo as item, index (item.icon)}
							<div class="flex flex-row items-center gap-10px">
								<span class="material-symbols-outlined">
									{item.icon}
								</span>
								<span class="prop-name">{item.name}</span>
								<span class="prop-value">{item.value}</span>
							</div>
						{/each}
					</div>
				</div>
			</div>
		</div>
		<div
			class="order-handle-buttons w-300px h-140px flex flex-col justify-center items-center min-h-160px p-10px"
		>
			<div
				class="bg-white border-red-7 color-red-7 border border-solid rounded-md w-full text-center h-36px line-height-36px flex-cc gap-10px"
			>
				<!-- <span class="material-symbols-outlined"> shopping_cart </span> -->
				<span class="font-bold">Amount: ${price_transform(total)} USD</span>
			</div>
			<div class="flex-cc gap-10px">
				<IconButton class="material-symbols-outlined" on:click={minus}>remove</IconButton>
				<Textfield
					bind:value={info.num}
					on:blur={changeQuantity}
					class="reset-input-text-align flex-1 text-input-center"
				></Textfield>
				<IconButton class="material-symbols-outlined" on:click={add}>add</IconButton>
			</div>
			<div class="w-full text-center color-#555 font-size-14px mt-2">
				Min.Quantity: {info.moq} PCS
			</div>
		</div>
	</div>
</div>

<Divider style="--mdc-theme-primary: #d1d5db" />
